<template>
  <div class="wh-banner" ref="triggerDom0" :class="{ ac1: isStart1, ac2: isStart2, ac3: isStart3 }">
    <div class="sticky">
      <div class="sticky-inner">
        <transition name="opacity">
          <sticky-digitizing v-if="isStart1" />
          <sticky-robot v-else-if="isStart2" />
          <sticky-shared v-else-if="isStart3" />
        </transition>
      </div>
      <ol class="bots">
        <li
          v-for="item in 3"
          :key="item"
          :class="{ active: (item === 1 && isStart1) || (item === 2 && isStart2) || (item === 3 && isStart3) }"
        />
      </ol>
    </div>
    <ul class="sticky-list">
      <li ref="triggerDom1">
        <digitizing :active="isStart1" />
      </li>
      <li ref="triggerDom2">
        <robot :active="isStart2" />
      </li>
      <li ref="triggerDom3">
        <shared :active="isStart3" />
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import Digitizing from '@/components/home/banner/digitizing.vue'
import Shared from '@/components/home/banner/shared.vue'
import Robot from '@/components/home/banner/robot.vue'
import StickyDigitizing from '@/components/home/banner/stickyDigitizing.vue'
import StickyRobot from '@/components/home/banner/stickyRobot.vue'
import StickyShared from '@/components/home/banner/stickyShared.vue'
import { onBeforeUnmount, onMounted, ref } from 'vue'

const triggerDom0 = ref<HTMLElement>()
const triggerDom1 = ref<HTMLElement>()
const triggerDom2 = ref<HTMLElement>()
const triggerDom3 = ref<HTMLElement>()
const isStart1 = ref<boolean>(false)
const isStart2 = ref<boolean>(false)
const isStart3 = ref<boolean>(false)

// 滚动条监听
const handleScroll = () => {
  if (!triggerDom0.value || !triggerDom1.value || !triggerDom2.value || !triggerDom3.value) return
  const scrollTop = document.documentElement.scrollTop
  const top0 = triggerDom0.value.offsetTop
  const top1 = triggerDom1.value.offsetTop
  const top2 = triggerDom2.value.offsetTop
  const top3 = triggerDom3.value.offsetTop
  const start1 = top0 + top1 - innerHeight / 6
  const start2 = top0 + top2 - innerHeight / 6
  const start3 = top0 + top3 - innerHeight / 6
  isStart1.value = scrollTop >= start1 && scrollTop < start2
  isStart2.value = scrollTop >= start2 && scrollTop < start3
  isStart3.value = scrollTop >= start3
}

onMounted(() => {
  document.addEventListener('scroll', handleScroll)
})

onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped lang="scss">
@import '@/assets/scss/base.scss';

.wh-banner {
  width: 100%;
  height: 300vh;
  position: relative;
  transition: all 1.5s;
  box-sizing: border-box;

  &.ac1 {
    //background: linear-gradient(180deg, #dbf2fd 0%, #dbf2fd 100%);
    background-color: #dbf2fd;
  }

  &.ac2 {
    //background: linear-gradient(180deg, #b8e5ea 0%, #fff 100%);
    background-color: #c8ecec;
  }

  &.ac3 {
    //background: linear-gradient(180deg, #fff 0%, #fff 100%);
    background-color: #fff;
  }

  .sticky {
    width: 100vw;
    height: 100vh;
    padding-right: 50px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 10;
    padding-top: 80px;

    .sticky-inner {
      position: absolute;
      left: 0;
      top: 80px;
      width: 50vw;
      height: 100%;
      display: flex;
      justify-content: center;
      flex-direction: column;
    }

    .bots {
      padding-right: 100px;
      width: 11px;
      position: absolute;
      right: 100px;
      top: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;

      > li {
        cursor: pointer;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background-color: #d2dee7;
        margin-bottom: 14px;
        transition: all 1s;
        position: relative;

        &:last-of-type {
          margin-bottom: 0;
        }

        &.active {
          background-color: #1f86ff;
        }
      }
    }
  }

  ::v-deep(.sticky-shared),
  ::v-deep(.sticky-robot),
  ::v-deep(.sticky-digitizing) {
    &.opacity-enter-active {
      opacity: 1;
      transform: translateY(0);
      transition: all 1s ease;
    }

    &.opacity-enter-from {
      opacity: 0;
    }
  }

  .sticky-list {
    box-sizing: border-box;
    width: 100vw;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;

    > li {
      width: 100%;
      height: 100vh;
    }
  }
}
</style>
